<template>
  <!-- 直播商品分析- 6 35 -->
  <div
    id="liveGoods"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div v-if="vipRootObj[6][35].owner">
      <div class="Box01">
        <div class="Item01">
          <div class="titleBoxWhat">
            <img src="@/assets/wang/live/rateAdd.png" alt="" />
            <span>直播销量（预估）趋势</span>
          </div>
          <section v-if="finish01 && xData01.length != 0">
            <div class="dataBox01">
              <div>
                累计直播销量<span>{{ format_num(saleNumList.sumCount) }}</span>
              </div>
              <div>
                销量峰值<span>{{ format_num(saleNumList.peakNum) }}</span>
              </div>
              <div>
                峰值时间<span>{{
                  timestamp(saleNumList.peakUnix, "h:m:s")
                }}</span>
              </div>
            </div>
            <div class="chartBox">
              <Category
                :xData="xData01"
                :y1Data="y1Data01"
                :y2Data="y2Data01"
                name1="增量"
                name2="总量"
                formatter="1"
              />
            </div>
          </section>
          <div
            v-loading="!finish01"
            v-if="!finish01"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div v-if="finish01 && xData01.length == 0" class="noDataClasswl">
            目前没有可以查看的数据哟~
          </div>
        </div>
        <div class="Item01">
          <div class="titleBoxWhat">
            <img src="@/assets/meng/video04_03.png" alt="" />
            <span>直播销售额（预估）趋势</span>
          </div>
          <section v-if="finish02 && xData02.length != 0">
            <div class="dataBox01">
              <div>
                累计销售额<span>{{ format_num(saleMoneyList.sumCount) }}</span>
              </div>
              <div>
                销售额峰值<span>{{ format_num(saleMoneyList.peakNum) }}</span>
              </div>
              <div>
                峰值时间<span>{{
                  timestamp(saleMoneyList.peakUnix, "h:m:s")
                }}</span>
              </div>
            </div>
            <div class="chartBox">
              <Category
                :xData="xData02"
                :y1Data="y1Data02"
                :y2Data="y2Data02"
                name1="增量"
                name2="总量"
                formatter="1"
              />
            </div>
          </section>
          <div
            v-loading="!finish02"
            v-if="!finish02"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div v-if="finish02 && xData02.length == 0" class="noDataClasswl">
            目前没有可以查看的数据哟~
          </div>
        </div>
        <div class="Item01 Item02">
          <div class="titleBoxWhat">
            <img src="@/assets/wang/talentCompare/goodnum.png" alt="" />
            <span>商品类目分布</span>
          </div>
          <div class="chartBox01">
            <BigPie
              :valueData="pieData01"
              v-if="finishPie01 && pieData01.length != 0"
            />
            <div
              v-loading="!finishPie01"
              v-if="!finishPie01"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div
              v-if="finishPie01 && pieData01.length == 0"
              class="noDataClasswl"
              style="margin-top: 150px"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
        <!-- <div class="Item01 Item02">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/live/brandRank.png" alt="" />
          <span>商品品牌分布</span>
        </div>
        <div class="chartBox01">
          <BigPie :valueData="pieData01" v-if="finishPie01" :iswrap="true" />
          <div
              v-loading="!finishFlag"
              v-if="!finishFlag"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div v-if="finishFlag && genderData == null" class="noDataNoticewl">
              目前没有可以查看的数据哟~
            </div>
        </div>
      </div> -->
      </div>
      <div class="Box02">
        <!-- 商品种类 -->
        <radioGroupWithNum
          :radio_values="proKindList"
          v-model="proKind"
          title="商品类目"
          class="mt_10"
        />
        <!-- 合作品牌 -->
        <!-- <radioGroupWithNum
        :radio_values="brandList"
        v-model="brand"
        title="合作品牌"
        class="mt_10"
      /> -->
        <!-- 合作小店 -->
        <radioGroupWithNum
          :radio_values="shopKindList"
          v-model="shopKind"
          title="合作小店"
          class="mt_10"
        />
        <section class="mt_10">
          <radio_group01
            :radio_values="['按销量', '按销售额']"
            v-model="KindName"
            class="tab01 inline"
          />
          <section class="search01">
            <div class="searchBox">
              <el-input
                v-model="keyword"
                placeholder="请输入商品关键词搜索"
                @keyup.enter.native="toSearch"
              ></el-input>
              <div class="imgBox" @click="toSearch">
                <img src="@/assets/wang/talentCompare/search.png" />
              </div>
            </div>
          </section>
        </section>

        <table class="table" v-if="proList.length != 0">
          <thead>
            <tr>
              <th>商品</th>
              <th>上下架时间</th>
              <th>销量（预估）</th>
              <th>销量额（预估）</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in proList" :key="'a' + index">
              <td>
                <div class="goodsBox">
                  <img :src="item.proLogo" class="leftImg" />
                  <div class="rightBox">
                    <div>
                      <!-- 来源 -->
                      <div style="margin-right: 5px">
                        <SourceIcon :sourceid="item.profrom" />
                      </div>
                      <span class="overflowTextWl">{{ item.proTitle }}</span>
                    </div>
                    <div>
                      <p>
                        直播价
                        <span
                          v-if="
                            item.livePrice == item.maxPrice ||
                              item.maxPrice == 0 ||
                              item.livePrice > item.maxPrice
                          "
                          >￥{{ format_num(item.livePrice) }}</span
                        >

                        <span v-if="item.livePrice < item.maxPrice"
                          >￥{{ format_num(item.livePrice) }}-{{
                            format_num(item.maxPrice)
                          }}</span
                        >
                      </p>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <div>
                  <p>{{ timestamp(item.addedUnix, "Y-M-D h:m:s") }}</p>
                  <p>
                    {{
                      item.offUnix
                        ? timestamp(item.offUnix, "Y-M-D h:m:s")
                        : "--"
                    }}
                  </p>
                </div>
              </td>
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.amount) }}</td>
              <td>
                <div
                  class="detailsBtnwl"
                  @click="toGoodsDetails(item.proId, '0')"
                >
                  查看详情
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-loading="loading"
          v-if="!(proList.length < (page - 1) * 20)"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <p
          class="nothing"
          v-show="proList.length != 0 && proList.length < (page - 1) * 20"
        >
          我是有底线的～
        </p>
        <div class="empty" v-show="!loading && proList.length == 0">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img
        :src="$global.staticUrl + 'image/egImg/liveGoods.jpg'"
        class="egBgImg"
      />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip
            routerName="liveData"
            :lowestVipNum="vipRootObj[6][35].ownerMinLevel"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import Category from "@/pages/wang/talent/tdetails/component/Category.vue";
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
import SourceIcon from "@/component/SourceIcon.vue";

export default {
  name: "",
  components: { Category, BigPie, radioGroupWithNum, SourceIcon },
  data() {
    return {
      saleNumList: {}, //直播销量（预估）趋势
      xData01: [],
      y1Data0: [],
      y2Data01: [],
      finish01: false,
      saleMoneyList: {}, //直播销售额（预估）趋势
      xData02: [],
      y1Data02: [],
      y2Data02: [],
      finish02: false,
      cancel: null,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      pieData01: [],
      finishPie01: false,
      proKindList: [], //商品类目
      proKind: "全部",
      shopKindList: [], //小店分类
      shopKind: "全部",
      KindName: "按销量",
      proList: [],
      keyword: "",
      page: 1,
      busy: false,
      loading: true,
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  computed: {
    changeData() {
      const { proKind, shopKind, KindName } = this;
      return {
        proKind,
        shopKind,
        KindName
      };
    }
  },
  watch: {
    changeData() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 搜索
    keyword: function(newVal, oldVal) {
      if (newVal == "") {
        this.proList = [];
        this.page = 1;
        this.getProList();
      }
    }
  },
  created() {
    if (this.vipRootObj[6][35].owner) {
      this.getData(6);
      this.getData(7);
      this.getProPie();
      this.getCateList();
    }
  },
  mounted() {},

  methods: {
    //   加载更多
    loadMore() {
      if (this.loading == false) {
        this.getProList();
      }
    },
    // 搜索
    toSearch() {
      this.proList = [];
      this.page = 1;
      this.getProList();
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`
      });
      window.open(router.href, "_blank");
    },
    // 获取折线图
    // 折线图
    getData(type) {
      let that = this;
      that.$axios
        .get(
          "/api/live/trend",
          {
            params: {
              roomId: that.$route.params.id,
              type: type
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            if (type == 6) {
              that.saleNumList = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach(element => {
                  that.xData01.push(that.timestamp(element, "h:m:s"));
                  return that.xData01;
                });
                // console.log("x", that.xData01);
                // y1
                that.y1Data01 = res.data.data.trendData[1];
                // console.log("y1", that.y1Data01);
                that.y2Data01 = res.data.data.trendData[0];
                // console.log("y2", that.y2Data01);
              }
              that.finish01 = true;
            }
            if (type == 7) {
              that.saleMoneyList = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach(element => {
                  that.xData02.push(that.timestamp(element, "h:m:s"));
                  return that.xData02;
                });
                // y1
                that.y1Data02 = res.data.data.trendData[1];
                that.y2Data02 = res.data.data.trendData[0];
              }
              that.finish02 = true;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品分类饼图
    getProPie() {
      let that = this;
      that.$axios
        .get(
          "/api/live/prochart",
          {
            params: {
              roomId: that.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.pieData01 = res.data.data;
            that.finishPie01 = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品和小店分类
    getCateList() {
      let that = this;
      that.$axios
        .get(
          "/api/live/cate",
          {
            params: {
              roomId: that.$route.params.id
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.cateList;
            that.shopKindList = res.data.data.shopList;
            that.getProList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品列表
    getProList() {
      let that = this;
      that.loading = true;
      // 商品类目
      let proCateId = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proCateId = item.value;
        }
      });
      let proIds = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proIds = item.proIds;
        }
      });

      // 小店分类
      let shopId = 0;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopId = item.value;
        }
      });
      // shopIds
      let shopIds = null;
      that.shopKindList.map((item, index) => {
        if (item.name == this.shopKind) {
          shopIds = item.shopIds;
        }
      });
      // 排序
      let sort = "";
      if (that.KindName == "按销量") {
        sort = "Volume";
      } else if (that.KindName == "按销售额") {
        sort = "Amount";
      }
      // console.log('sort',sort)
      that.$axios
        .post(
          "/api/live/prosearch",
          {
            roomId: that.$route.params.id,
            proIds: proIds,
            proCateId: proCateId,
            shopId: shopId,
            shopIds: shopIds,
            key: this.trimStr(that.keyword),
            page: that.page,
            size: 20,
            sort: sort //销量=Volume，销量额=Amount
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.page += 1;
            that.proList = that.proList.concat(res.data.data);
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
            // console.log("liat", that.proList);
          } else {
            that.busy = true;
          }
          that.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`
      });
      window.open(router.href, "_blank");
    }
  }
};
</script>
<style lang="less" scoped>
#liveGoods {
  min-height: 100vh;

  .loading01 {
    margin-top: 250px;
  }
  .search01 {
    display: inline-block;
    margin-left: 28px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .inline {
    display: inline-block;
  }
  .Box01 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .Item01 {
      padding-top: 50px;
      width: 50%;
      height: 550px;
      .dataBox01 {
        width: 100%;
        // padding: 0 30px;
        padding-top: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        div {
          // flex: 1 1 auto;
          // flex: 1;
          // width: auto;
          font-size: 14px;
          color: #555555;
          text-align: center;
          padding: 0 12px;
          box-sizing: border-box;
          span {
            font-family: DINAlternate-Bold;
            font-size: 18px;
            color: #1779ff;
            padding-left: 9px;
          }
        }
        p:last-child {
          padding: 0;
        }
      }
      .chartBox {
        width: 100%;
        height: 100%;
      }
      .chartBox01 {
        width: 100%;
        height: 340px;
      }
    }
    .Item01:nth-of-type(2n) {
      box-sizing: border-box;
      padding-left: 20px;
    }
    .Item02 {
      height: 350px !important;
    }
  }
  .Box02 {
    width: 100%;
  }
  table {
    overflow-x: auto;
    margin-top: 20px;
    width: 100%;
    thead {
      tr {
        width: 100%;
        th {
          white-space: pre-wrap;
        }
        th:nth-of-type(1) {
          width: 45%;
        }
      }
    }
    tbody {
      tr {
        height: 140px;
        text-align: center;
        td:nth-of-type(2),
        td:nth-of-type(3),
        td:nth-of-type(4),
        td:nth-of-type(5),
        td:nth-of-type(6),
        td:nth-of-type(7) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
        td:nth-of-type(2) {
          color: #555555 !important;
          font-size: 14px;
        }
      }
      // 商品
      .goodsBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 7%;
        .leftImg {
          width: 80px;
          height: 80px;
          border-radius: 20px;
          border: 1px solid #e5e5e5;
        }
        .rightBox {
          flex: 1;
          margin-left: 20px;
          text-align: left;
          div:nth-of-type(1) {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: left;
            img {
              width: 18px;
              height: 18px;
              margin-right: 5px;
            }
            span {
              text-align: left;
              font-weight: 600;
              // padding-left: 5px;
            }
          }
          div:nth-of-type(2) {
            text-align: left;
            margin-top: 11px;
            p {
              display: inline-block;
            }
            p:nth-of-type(1) {
              font-size: 14px;
              color: #555555;
              padding-right: 24px;
              span {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #ea1b0b;
                padding-left: 3px;
              }
            }
            p:nth-of-type(2) {
              font-size: 14px;
              color: #555555;
              // padding-left: 24px;
              span {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #222222;
                padding-left: 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
